<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>参考链接：http://www.bootstrapmb.com/item/1749</title>
</head>
<style>
    @import url(http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css);

    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        list-style: none;
    }

    html {
        width: 100%;
        height: 100%;
    }

    body {
        width: 100%;
        height: 100%;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-box;
        display: box;
        -webkit-box-align: center;
        -moz-box-align: center;
        -ms-box-align: center;
        box-align: center;
        -webkit-box-pack: center;
        -moz-box-pack: center;
        -ms-box-pack: center;
        box-pack: center;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    .clearfix {
        zoom: 1;
    }

    .clearfix:before,
    .clearfix:after {
        content: "\0020";
        display: block;
        height: 0;
        overflow: hidden;
    }

    .clearfix:after {
        clear: both;
    }

    body {
        background: #f2f2f2;
    }

    ul {
        position: relative;
        -webkit-transform: rotate(-35deg) skew(20deg, 5deg);
        -moz-transform: rotate(-35deg) skew(20deg, 5deg);
        -ms-transform: rotate(-35deg) skew(20deg, 5deg);
        -o-transform: rotate(-35deg) skew(20deg, 5deg);
        transform: rotate(-35deg) skew(20deg, 5deg);
    }

    .list-item {
        background: #000000;
        color: #575757;
        text-align: center;
        height: 2.5em;
        width: 4em;
        vertical-align: middle;
        line-height: 2.5em;
        border-bottom: 1px solid #060606;
        position: relative;
        display: block;
        text-decoration: none;
        -webkit-box-shadow: -2em 1.5em 0 #e1e1e1;
        -moz-box-shadow: -2em 1.5em 0 #e1e1e1;
        box-shadow: -2em 1.5em 0 #e1e1e1;
        -webkit-transition: top 0.25s linear, left 0.25s linear, background 0.1s linear, color 0.1s linear;
        -moz-transition: top 0.25s linear, left 0.25s linear, background 0.1s linear, color 0.1s linear;
        -o-transition: top 0.25s linear, left 0.25s linear, background 0.1s linear, color 0.1s linear;
        transition: top 0.25s linear, left 0.25s linear, background 0.1s linear, color 0.1s linear;
    }

    .list-item:hover {
        background: #ff6e42;
        color: #fffcfb;
        top: -0.5em;
        left: 0.5em;
        -webkit-transition: top 0.25s linear, left 0.25s linear, background 0.1s linear, color 0.1s linear;
        -moz-transition: top 0.25s linear, left 0.25s linear, background 0.1s linear, color 0.1s linear;
        -o-transition: top 0.25s linear, left 0.25s linear, background 0.1s linear, color 0.1s linear;
        transition: top 0.25s linear, left 0.25s linear, background 0.1s linear, color 0.1s linear;
        -webkit-box-shadow: -2em 2em 0 #e1e1e1;
        -moz-box-shadow: -2em 2em 0 #e1e1e1;
        box-shadow: -2em 2em 0 #e1e1e1;
    }

    .list-item:hover:before,
    .list-item:hover:after {
        -webkit-transition: all 0.25s linear;
        -moz-transition: all 0.25s linear;
        -o-transition: all 0.25s linear;
        transition: all 0.25s linear;
    }

    .list-item:hover:before {
        background: #b65234;
        width: 1em;
        top: 0.5em;
        left: -1em;
    }

    .list-item:hover:after {
        background: #b65234;
        width: 1em;
        bottom: -2.5em;
        left: 1em;
        height: 4em;
    }

    .list-item:before,
    .list-item:after {
        -webkit-transition: all 0.25s linear;
        -moz-transition: all 0.25s linear;
        -o-transition: all 0.25s linear;
        transition: all 0.25s linear;
    }

    .list-item:after {
        content: "";
        position: absolute;
        height: 4em;
        background: #181818;
        width: 0.5em;
        bottom: -2.25em;
        left: 1.5em;
        -webkit-transform: rotate(90deg) skew(0deg, 45deg);
        -moz-transform: rotate(90deg) skew(0deg, 45deg);
        -ms-transform: rotate(90deg) skew(0deg, 45deg);
        -o-transform: rotate(90deg) skew(0deg, 45deg);
        transform: rotate(90deg) skew(0deg, 45deg);
    }

    .list-item:before {
        content: "";
        position: absolute;
        height: 2.5em;
        background: #121212;
        width: 0.5em;
        top: 0.215em;
        left: -0.45em;
        -webkit-transform: skewY(-45deg);
        -moz-transform: skewY(-45deg);
        -ms-transform: skewY(-45deg);
        -o-transform: skewY(-45deg);
        transform: skewY(-45deg);
    }
</style>

<body>
    <ul>
        <li><a class="list-item" href=""><i class="icon-reorder"></i></a></li>
        <li><a class="list-item" href=""><i class="icon-th-large"></i></a></li>
        <li><a class="list-item" href=""><i class="icon-bar-chart"></i></a></li>
        <li><a class="list-item" href=""><i class="icon-tasks"></i></a></li>
        <li><a class="list-item" href=""><i class="icon-bell"></i></a></li>
        <li><a class="list-item" href=""><i class="icon-archive"></i></a></li>
        <li><a class="list-item" href=""><i class="icon-comment"></i></a></li>
        <li><a class="list-item" href=""><i class="icon-sitemap"></i></a></li>
        <li><a class="list-item" href=""><i class="icon-thumbs-up"></i></a></li>
        <li><a class="list-item" href=""><i class="icon-tumblr"></i></a></li>
    </ul>
</body>

</html>